<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /**
         * 需求：用户点击校正按钮，要获取输出狂中的的内容，然后验证其是否合法
         * 验证规则是：必须有字母，数字，下划线构成，并且长度为5-12位
         * */
        function onclickfun(){
            //1.操作一个标签一定要获取这个标签的对象
            var usernameObj=document.getElementById("username");
            //alert(usernameObj);
            //如何验证字符串，符合某个规则，需要使用正则表达式技术
            var usernameText=usernameObj.value;
            var patt=/^\w{5,12}$/;
            /**
             * test()发布放大用于测试某个字符串，是不是匹配规则
             * 匹配就返回true，不匹配就返回false
             * */

             var usernameSpanObj=document.getElementById("usernameSpan");
             //innerHTML  表示起始标签和接受标签中的内容
            //innerHTML  这个属性可读，可写
             usernameSpanObj.innerHTML="验证成功";
            if(patt.test(usernameText)){
                //alert("用户名合法");
                usernameSpanObj.innerHTML="用户名合法";
                usernameSpanObj.innerHTML="用户名合法";
                usernameSpanObj.innerHTML="<img src=\"true.png\" width=\"18\">";
            }else {
                //alert("用户名不合法");
                usernameSpanObj.innerHTML="用户名不合法";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username"/>
    <span id="usernameSpan" style="color: red;"></span>
    <button onclick="onclickfun()">效验</button>

</body>
</html>